<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="line" style="height: 400px;border: 1px solid red;" ></div>
	<script src="echarts/echarts.js"></script>
	<script>
		var lineEcharts=echarts.init(document.querySelector('#line'))
		var option={
			title:{
				text:'堆叠区域图',
				show:true,
				link:'https://www.baidu.com',
				target:'self', //当前窗口打开  blank 新窗口
				textStyle:{
					color:'red',
					fontStyle:'italic',
					fontWeight:'normal',
					fontFamily:'serif',
					fontSize:20,
					align:'right',  //无效---------------------
					verticalAlign:'top' // ---------------
				},
				subtext:'支持使用\/n\n 换行'+'xx',
				sublink:'xxx',
				subtarget:'blanck',
				subtextStyle:{},
				padding:[// 上 右 下 左   默认为5
					20,  
					10,
					5,
					10
				],
				itemGap:20,//主副标题之间的间距
				z:2,//组件的所有图形的z值，z值小的图形 会被z值大的图形覆盖
				left:100,//20%相对容器高宽百分比 
				top:20,
				right:20,
				bottom:20,
				backgroundColor:'#ccc',
				borderColor:'red',
				borderWidth:5,
				borderRadius:5,
				shadowBlur:10,
				shadowColor:'yellow',
				shadowOffsetX:5,
				shadowOffsetY:10
			},
			legend:{
				type:'plain',//普通图例， scroll可滚动翻页的图例
				show:true,
				z:2,
				
			},
			xAxis:{
				type:'category',
				boundaryGap:false,//boundary:边界  Gap:间隙缺口  设置在刻度线上
				data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis:{
				type:'value'
			},
			series:[{
				name:'name1',
				data: [820, 932, 901, 934, 1290, 1330, 1320],
				type:'line',
				smooth:true,//设置曲线
				areaStyle:{
					normal:{}
				}, //设置覆盖 必须要写 normal:{}
				stack:'总量' // -----------------
			},{
				name:'name2',
				data:[220, 182, 191, 234, 290, 330, 310],
				type:'line',
				smooth:true,//设置曲线
				areaStyle:{
					normal:{}
				} //设置覆盖 必须要写 normal:{}
			}],
			toolbox:{
				feature:{
					saveAsImage:{}  //保存图片工具栏
				}
			},
			tooltip:{
				trigger:'axis',  //显示 name ： 对应的value
				axisPointer:{
					type:'cross',  //鼠标移动到坐标轴上显示坐标位置
					label:{
						backgroundColor:'red'//坐标位置显示颜色
					}
				}
			},
			grid:{
				left:'3%',
				right:'4%',
				bottom:'3%',//默认不包含坐标轴距离底部3%
				containLabel:true  //是否包含坐标轴
			}
		}
	

		lineEcharts.setOption(option)
	</script>
</body>
</html>